<!DOCTYPE html>
<script src="../include.js"></script>
<div contenteditable="true">foobar</div>
<script>
    test(() => {
        const range = document.createRange();
        getSelection().addRange(range);

        const divElm = document.querySelector('div');
        const report = () => println(`Div contents: "${divElm.innerHTML}" bold state: ${document.queryCommandState('bold')}`);
        report();

        println(`useCSS supported: ${document.queryCommandSupported('useCSS')}`);
        document.execCommand('useCSS', false, 'false');  // NOTE: false means "use CSS"

        // Make 'fo' bold, with style=".."
        range.setStart(divElm.childNodes[0], 0);
        range.setEnd(divElm.childNodes[0], 2);
        document.execCommand('bold');
        report();

        document.execCommand('useCSS', false, 'true');

        // Make 'ar' bold, with <b>
        range.setStart(divElm.childNodes[1], 2);
        range.setEnd(divElm.childNodes[1], 4);
        document.execCommand('bold');
        report();
    });
</script>
